<template>
	<div class="index">
		<el-row>
			<el-col class="index-head" :span="24">
				<div class="index-head-left">工资核算</div>
				<div class="quick-entrance">
					<ul>
						<li class="quick-entrance-item">快捷入口：</li>
						<li class="quick-entrance-item">
							<router-link to="/expenditure">加油气</router-link>
						</li>
						<li class="quick-entrance-item">
							<router-link to="/weihuweixiu">维修</router-link>
						</li>
						<li class="quick-entrance-item">
							<router-link to="/feiyongbaoxiao">报销</router-link>
						</li>
						<li class="quick-entrance-item">
							<router-link to="/cheliangjieche">检车</router-link>
						</li>
						<li class="quick-entrance-item">
							<router-link to="/cheliangbaoxian">保险</router-link>
						</li>
            <!--<li class="quick-entrance-item">
              <router-link to="/xueyuantuifei">退费</router-link>
            </li>-->
					</ul>
				</div>
				<div class="student-select">
					<el-col :span="8">
						<span class="wages-text">核算时间</span>
						<div class="block">
							<el-date-picker class="time-ipt" v-model="time" @change="change" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
							</el-date-picker>
							<el-button class="wages-btn" @click="hesuan">核 算</el-button>
						</div>
					</el-col>
					<el-col :span="12">
						<el-form class="wages-select">
							<el-col :span="12">
								<el-form-item label="员工类型">
									<el-select class="wages-ipt" v-model="value10">
										<el-option label="全部" value=""></el-option>
										<el-option label="普通员工" value="1">普通员工</el-option>
										<el-option label="教练员" value="2">教练员</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="证件号码">
									<el-input class="wages-ipt" v-model="personNumber"></el-input>
								</el-form-item>
							</el-col>
						</el-form>
					</el-col>
					<el-col :span="4" class="shuoming">
						<div><i class="iconfont icon-jixiaokaohe"></i>绩效说明</div>
						<div><i class="iconfont icon-jifenshuoming"></i>扣款说明</div>
					</el-col>
				</div>
			</el-col>
			<el-col :span="24">
				<el-table class="table tb-edit" :data="resData" height="574px" style="width: 100%;text-align: center">
					<el-table-column label="姓名" prop="employeeName">
					</el-table-column>
					<el-table-column width="80px" prop="employeeType" label="员工类型">
						<template slot-scope="scope">{{['','普通员工','教练员'][scope.row.employeeType]}}</template>
					</el-table-column>
					<el-table-column width="170px" prop="personNumber" label="证件号码">
					</el-table-column>
					<el-table-column prop="hiredate" label="入职时间">
					</el-table-column>
					<el-table-column label="基本工资">
						<template slot-scope="scope">
							<el-input size="small" v-model="scope.row.basicWages" placeholder="请输入内容" @blur="finishEdit($event)" @change="handleEdit(scope.$index, scope.row)"></el-input> <span @dblclick="edit($event)">{{scope.row.basicWages}}</span>
						</template>
					</el-table-column>
					<el-table-column label="绩效工资">
						<template slot-scope="scope">
							<el-popover trigger="hover" placement="top">
								<div v-if="scope.row.employeeType == 1" class="jxInfor">
									<p>招生人数: {{ scope.row.performanceVoucher.zsrs }} 人</p>
								</div>
								<div v-else class="jxInfor">
									<p>教学时常(单位：小时)</p>
									<p>科目一：{{ scope.row.performanceVoucher.sub1 }}&times;{{ scope.row.performanceVoucher.oneWages }} (元/小时)&#61;{{ scope.row.performanceVoucher.sub1Wages }} (元)</p>
									<p>科目二：{{ scope.row.performanceVoucher.sub2 }}&times;{{ scope.row.performanceVoucher.twoWages }} (元/小时)&#61;{{ scope.row.performanceVoucher.sub2Wages }} (元)</p>
									<p>科目三：{{ scope.row.performanceVoucher.sub3 }}&times;{{ scope.row.performanceVoucher.threeWages }} (元/小时)&#61;{{ scope.row.performanceVoucher.sub3Wages }} (元)</p>
									<p>科目四：{{ scope.row.performanceVoucher.sub4 }}&times;{{ scope.row.performanceVoucher.fourWages }} (元/小时)&#61;{{ scope.row.performanceVoucher.sub4Wages }} (元)</p>
									<p>科目二加时：{{ scope.row.performanceVoucher.sub2Js }}&times;{{ scope.row.performanceVoucher.twoJsWages }} (元/小时)&#61;{{ scope.row.performanceVoucher.sub2JsWages }} (元)</p>
									<p>科目二模拟：{{ scope.row.performanceVoucher.sub2Mn }}&times;{{ scope.row.performanceVoucher.twoMnWages }} (元/小时)&#61;{{ scope.row.performanceVoucher.sub2MnWages }} (元)</p>
									<p>科目三加时：{{ scope.row.performanceVoucher.sub3Js }}&times;{{ scope.row.performanceVoucher.threeJsWages }} (元/小时)&#61;{{ scope.row.performanceVoucher.sub3JsWages }} (元)</p>
									<p>科目三模拟：{{ scope.row.performanceVoucher.sub3Mn }}&times;{{ scope.row.performanceVoucher.threeMnWages }} (元/小时)&#61;{{ scope.row.performanceVoucher.sub3MnWages }} (元)</p>
									<p>共计：{{ scope.row.performanceVoucher.sum }} (元)</p>
								</div>
								<div slot="reference" class="name-wrapper">
								<el-input size="small" v-model="scope.row.performanceWages" placeholder="请输入内容" @blur="finishEdit($event)" @change="handleEdit(scope.$index, scope.row)"></el-input> <span @dblclick="edit($event)">{{scope.row.performanceWages}}</span>
								</div>
							</el-popover>
						</template>
					</el-table-column>
					<el-table-column prop="seniorityWages" label="工龄工资">
						<template slot-scope="scope">
							<el-input size="small" v-model="scope.row.seniorityWages" placeholder="请输入内容" @blur="finishEdit($event)" @change="handleEdit(scope.$index, scope.row)"></el-input> <span @dblclick="edit($event)">{{scope.row.seniorityWages}}</span>
						</template>
					</el-table-column>
					<el-table-column width="80px" label="奖金">
						<template slot-scope="scope">
							<el-input size="small" v-model="scope.row.bonus" placeholder="请输入内容" @blur="finishEdit($event)" @change="handleEdit(scope.$index, scope.row)"></el-input> <span @dblclick="edit($event)">{{scope.row.bonus}}</span>
						</template>
					</el-table-column>
					<el-table-column width="80px" label="扣款">
						<template slot-scope="scope">
              <el-popover trigger="hover" placement="top" v-if="scope.row.employeeType == 2">
                <div class="jxInfor" >
                  <p>扣款总计</p>
                  <p>请假天数：{{ scope.row.performanceVoucher.vacate }}&times;{{ scope.row.performanceVoucher.vacatePrice }} (元/天)&#61;{{ scope.row.performanceVoucher.vacateTotle }} (元)</p>
                  <p>休班天数：{{ scope.row.performanceVoucher.ofduty }}&times;{{ scope.row.performanceVoucher.ofdutyPrice }} (元/天)&#61;{{ scope.row.performanceVoucher.ofdutyTotle }} (元)</p>
                  <p>迟到次数：{{ scope.row.performanceVoucher.late }}&times;{{ scope.row.performanceVoucher.latePrice }} (元/天)&#61;{{ scope.row.performanceVoucher.lateTotle }} (元)</p>
                  <p>早退次数：{{ scope.row.performanceVoucher.early }}&times;{{ scope.row.performanceVoucher.earlyPrice }} (元/天)&#61;{{ scope.row.performanceVoucher.earlyTotle }} (元)</p>
                  <p>共计：{{ scope.row.performanceVoucher.deductSum }} (元)</p>
                </div>
                <div slot="reference" class="name-wrapper">
                  <el-input size="small" v-model="scope.row.deductMoney" @blur="finishEdit($event)" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span @dblclick="edit($event)">{{scope.row.deductMoney}}</span>
                </div>
              </el-popover>
              <div v-else-if="scope.row.employeeType == 1"><el-input size="small" v-model="scope.row.deductMoney" @blur="finishEdit($event)" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span @dblclick="edit($event)">{{scope.row.deductMoney}}</span></div>
						</template>
					</el-table-column>
					<el-table-column prop="wagesTotal" label="工资总计">
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="24" class="my-pagination" style="height:59px;">
				<el-button v-show="tableData.length" class="wages-submit" round @click="popWin">提交</el-button>
			</el-col>
		</el-row>
		<!-- 确认信息 -->
		<wagesSub v-model="wagesSub" :rowData="tableData" :selectDate="select"></wagesSub>
	</div>
</template>

<script>
import Compute from "@/assets/compute.holdtime";
import wagesSub from "@/components/wages-submit";
export default {
  name: "wages",
  components: {
    wagesSub
  },
  data() {
    return {
      wagesSub: false,
      value10: "",
      personNumber: "",
      time: "",
      select: {
        startDate: "",
        endDate: ""
      },
      total: 1,
      tableData: []
    };
  },
  computed: {
    resData() {
      if (this.value10 == "" && this.personNumber == "") {
        return this.tableData;
      } else {
        return this.tableData.filter(e => {
          if (this.value10) {
            return (
              e.employeeType == this.value10 &&
              e.personNumber.indexOf(this.personNumber) != -1
            );
          } else {
            return e.personNumber.indexOf(this.personNumber) != -1;
          }
        });
      }
    }
  },
  methods: {
    // 调用change钩子
    change() {
      this.select.startDate = this.time[0];
      this.select.endDate = this.time[1];
    },
    hesuan() {
      this.$http.post("wages/employyeeWages", this.select, d => {
        if (d.status == 1) {
          this.tableData = d.data.list;
        } else {
          layer.msg(d.msg, {
            shift: 6,
            shade: 0.3
          });
        }
      });
    },
    // 表格行内编辑
    handleEdit(index, row) {
      row.wagesTotal = Compute.minus(
        Compute.plus(
          Compute.plus(
            Compute.plus(row.basicWages, row.performanceWages),
            row.bonus
          ),
          row.seniorityWages
        ),
        row.deductMoney
      );
    },
    edit(e) {
      $(e.target)
        .hide()
        .siblings()
        .show();
    },
    finishEdit(e) {
      $(e.target)
        .parent()
        .hide()
        .siblings()
        .show();
    },
    // tanchuang
    popWin() {
      this.wagesSub = true;
    }
  }
};
</script>

<style scoped>
.jxInfor p {
	line-height: 24px;
	padding: 5px 0 0 0;
}
.wages-submit {
  padding: 12px 44px;
  background: url("../../static/img/jianbian.jpg");
  background-size: 100% 100%;
  border: 0;
  color: #fff;
  float: right;
  margin-right: 30px;
}
/* 行内编辑样式 */

.tb-edit .el-input {
  display: none;
}

.tb-edit .current-row .el-input {
  display: block;
  text-align: center;
}

.tb-edit .current-row .el-input + span {
  display: none;
}
/* 行内编辑样式 end */

.wages-select .el-form-item {
  margin-bottom: 0 !important;
}

.wages-ipt {
  width: 60% !important;
  float: left;
}

.shuoming {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}

.shuoming div {
  line-height: 20px;
  color: #606060;
  cursor: pointer;
}

.shuoming div:first-child {
  margin-right: 20px;
}

.shuoming div i {
  color: #606060;
  float: left;
  margin-right: 5px;
}

.wages-text {
  padding: 13px 0;
  float: left;
  margin-right: 20px;
  color: #606266;
}

.student-select {
  padding: 30px 3%;
}

.wages-ipt {
  width: 300px;
  float: left;
}

.wages-btn {
  padding: 13px 20px !important;
  background: url("../../static/img/jianbian.jpg");
  background-size: 100% 100%;
  color: #fff;
  margin-left: -6px;
  border: 0;
}

.time-ipt {
  width: 230px;
  border-right: 0;
  border-radius: 4px 0 0 4px !important;
}

.table {
  border: 1px solid #e1e1e1;
  border-bottom: 0;
  margin-top: 15px;
}
</style>